<template>
    <div class="signs">
        <img :src="sign" style="width:80%"/>
        <div style="text-align:center">{{label}}</div>
    </div>
</template>
<script>
import Vue  from 'vue'
export default {
    props:["data","id","exkey"],
    data(){
        return {
            sign:"",
            label:""
        }
    },
    created(){
        this.loadSign();
    },
    methods:{
        loadSign(){
            let ids=this.id.split(".");
            this.sign=this.data[ids[0]][ids[1]]
          
            if(this.exkey){
                let labels=this.exkey.label;
              
                if(labels){
                    labels=labels.split(".")
                    this.label=this.data[labels[0]][labels[1]]
                }
            }
            
        }
    },
    watch:{
        data:{
            handler: function (newVal) {
                this.loadSign();
            },
            deep:true
        }
    }
}
</script>
<style scoped>
    .signs{
    }
</style>